﻿import React,{Component} from 'react'
import { NavBar, Icon } from 'antd-mobile';
import {Switch,Route,Redirect} from 'react-router-dom'
import NavFooter from '../../components/nav_footer/nav_footer'
import Home from '../home/home'
import {Other} from '../other/other'
import Info from '../info/info'
import Message from '../message/message'
import NewsList from '../news/news_list'
import NewsDetail from '../news/news_detail'
export class Main extends Component{
    //实例属性
    navList = [ // 包含所有导航组件的相关信息数据
        {
          path: '/home', // 路由路径
          component: Home,
          title: '首页',
          icon: 'home',
        },
        {
          path: '/info', // 路由路径
          component: Info,
          title: '信息',
          icon: 'info',
        },
        {
          path: '/message', // 路由路径
          component: Message,
          title: '留言',
          icon: 'message',
        },
        {
          path: '/other', // 路由路径
          component: Other,
          title: '其他',
          icon: 'other',
        }
    ]

    handlePath = ()=>{
      //回退到上一级路径
      this.props.history.goBack()
    }
    
    render(){
        const path = this.props.location.pathname
        const currentNav = this.navList.find((nav)=>nav.path===path)

        return (
            <div>
                <NavBar
                leftContent={
                  (!currentNav)?(<span style={{color:'#ffffff'}} onClick={this.handlePath}>BACK</span>):null
                }
                rightContent={[
                    <Icon key="0" type="ellipsis" />
                ]}
                >智能火警系统客户端</NavBar>
                <Switch>
                    {
                        this.navList.map((nav)=>(<Route key={nav.path} path={nav.path} component={nav.component}></Route>))
                    }
                    <Route path="/typeNewsList/:type" component={NewsList}></Route>
                    <Route path="/newsDetail/:id" component={NewsDetail}></Route>
                    <Redirect to="/home"></Redirect>
                </Switch>
                {currentNav?<NavFooter navList={this.navList}></NavFooter>:null}
            </div>
        )
    }
}